﻿<!DOCTYPE html>
<html lang="">
<head>
    <title>fabu</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <script src="../static/js/vue.js"></script>
    <script src="../static/quill/quill_editor.js"></script>
    <script src="../static/element-ui/index.js"></script>
    <script src="../static/js/axios.js"></script>
    <link rel="stylesheet" href="../static/quill/quill.css">
    <link rel="stylesheet" href="../static/element-ui/index.css">
    <link rel="stylesheet" href="../static/css/fabu.css">
    <style>
        .avatar-uploader .el-upload {
            position: absolute;
            width: 56%;
            left: 22%;
            height: 100%;
            border: 1px dashed #d9d9d9;
            cursor: pointer;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            position: absolute;
            height: 11%;
            width: 13%;
            left: 44%;
            top: 44%;
            font-size: 28px;
            color: #8c939d;
        }

        .avatar {
            width: 360px;
            height: 180px;
            display: block;
        }

        .el-tag + .el-tag {
            margin-left: 10px;
        }

        .button-new-tag {
            margin-left: 10px;
            height: 32px;
            line-height: 30px;
            padding-top: 0;
            padding-bottom: 0;
        }

        .input-new-tag {
            width: 90px;
            margin-left: 10px;
            vertical-align: bottom;
        }

        .el-upload-dragger {
            border-radius: 0;
            width: 100%;
            height: 100%;
        }

    </style>
</head>
<body>
<div id="fabu" style="width: 100%;height: 100%">
    <div id="base" style="width: 100%;height: 100%;position: relative;">
        <!-- 左侧区域-->
        <div class="leftdiv" >
            <!--输入标题 -->
            <div class="title">
                <input class="input_t" v-model="article.title" @keydown="TabFour" type="text" value=""
                       placeholder="请输入标题"/>
            </div>
            <div class="conp" :class="{ flipped: isFlipped }">
                <!-- 输入内容 -->
                <div class="content">
                    <div class="ct_child" ref="content"></div>
                </div>
                <!-- 输入摘要 -->
                <div class="content" style="transform: rotateY(180deg);">
                    <div class="ct_child" ref="zhaiyao"></div>
                </div>
            </div>

            <!-- 切换 -->
            <div class="change">
                <el-tooltip class="item" effect="dark" :content="textf" placement="top-start">
                    <el-button type="primary" icon="el-icon-refresh" @click="toggleFlip"></el-button>
                </el-tooltip>
            </div>
        </div>
        <!-- 右侧区域-->
        <div class="rightdiv">
            <div class="rchild1">
                <div class="rd2" :class="divclass" @mouseenter="change_pt">
                    <div style="height: 25%;width:100%;position: absolute;top:25%;text-align: center;font-size: 24px;font-style: italic;">
                        封
                    </div>
                    <div style="height: 25%;width:100%;position: absolute;top:50%;text-align: center;font-size: 24px;font-style: italic;">
                        面
                    </div>
                </div>
                <!-- 上传封面 -->
                <div style="">
                    <el-upload
                            class="avatar-uploader"
                            action=""
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :drag="true"
                            :before-upload="beforeAvatarUpload">
                        <img fit="fill" v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 100%;height: 100%">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </div>
            </div>
            <div class="rchild2">
                <div style="position: absolute;width: 100%;height: 15%;top:10%;text-align: center;font-size: 24px;font-style: italic;font-weight: bold">
                    分类
                </div>
                <div style="position: absolute;width: 80%;height: 70%;top:30%;left: 15%">
                    <!-- 分类框  -->
                    <el-checkbox-group v-model="tagList">
                        <el-checkbox-button v-for="city in tags" :label="city"
                                            :key="city"></el-checkbox-button>
                    </el-checkbox-group>
                </div>

            </div>
        </div>
        <!-- 底部区域 -->
        <div class="bottomdiv">
            <el-button type="warning" round style="width: 160px;height: 40px;position: absolute;left: 160px;top:30px;"
                       @click="fabu">发布
            </el-button>
        </div>
    </div>
</div>
<script src="../static/js/fabu.js"></script>
</body>
</html>
